<template>
	<view class="wrapper">
		<div class="header posf flex-start cfff" :style="{padding:`calc(12rpx + ${safeTop}px) 20rpx 25rpx`}">
			<u-icon name="arrow-left" color="#fff" size="20" @click="back(1)"></u-icon>
			<div class="f30 ml20">绑定福利卡</div>
		</div>
		<div class="bfff">
			<image src="../../static/duiHuan.png" mode="widthFix" class="dui_icon"></image>
			<div class="center f36 c333 mb20">输入卡号和卡密</div>
			<div class="f24 c999 center">请使用发放的福利卡绑定</div>
			<div class="new-box colum">
				<div class="input-box center mb30">
					<input type="text" class="flex1 f30" placeholder-style="color:#ccc" placeholder="请输入卡号"
						v-model="exchangeCode" />
				</div>
				<div class="input-box center">
					<input type="text" class="flex1 f30" placeholder-style="color:#ccc" placeholder="请输入卡密"
						v-model="exchangePwd" />
				</div>
			</div>
			<div class="bth-red" @click="getExchangeCoupon">立即绑定</div>
			<div class="center ctheme mb50" @click="scan">
				<u-icon name="scan" color="#FF5858" size="20"></u-icon>
				<div class="ml10">扫码绑定</div>
			</div>
			<div class="alert-main">
				<div class="f34 fbold c333 mb50">温馨提示</div>
				<div class="c999 f34 c999 mb50 line15">1、优惠券绑定后不可解绑转增，仅限当前用户消费使用;</div>
				<div class="c999 f34 c999 mb50 line15">2、绑定后请在有效期内使用，过期作废;</div>
				<div class="c999 f34 c999 mb50 line15">3、如出现不可抗力或情势变更的情况，订台可依相关法律法规的规定主张免责。</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				exchangeCode: '',
				exchangePwd: ''
			};
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('uInfo')
		},
		methods: {
			// 兑换码兑换
			getExchangeCoupon() {
				if (this.exchangeCode == '') {
					uni.showToast({
						title: '请输入卡号',
						icon: 'none'
					})
					return
				}
				if (this.exchangePwd == '') {
					uni.showToast({
						title: '请输入卡密',
						icon: 'none'
					})
					return
				}
				this.$http('/api/exchangeCoupon', {
					phone: this.userInfo.phone,
					exchangeCode: this.exchangeCode,
					exchangePwd: this.exchangePwd
				}, true, 'POST').then((r) => {
					uni.showToast({
						title: '兑换成功！'
					})
					this.exchangeCode = ''
					this.exchangePwd = ''
				})
			},
			scan() {
				let that = this
				uni.scanCode({
					success(e) {
						console.log(e)
						that.exchangeCode = e.result.split('|')[0]
						that.exchangePwd = e.result.split('|')[1]
					},
					fail(e) {
						console.log(e)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.bfff {
		border-radius: 15rpx;
		height: calc(100vh - 240rpx);
		margin: 170rpx 20rpx 0;
		border: 1rpx solid #fff;

		.alert-main {
			padding: 0 50rpx;
		}

		.bth-red {
			width: 535rpx;
			height: 80rpx;
			margin: 0 auto 40rpx;
			border-radius: 40rpx;
		}

		.new-box {
			margin: 140rpx auto 100rpx;
		}

		.input-box {
			width: 535rpx;
			height: 80rpx;
			border-radius: 10rpx;
			border: 1rpx solid #ccc;

			padding: 0 20rpx 0 25rpx;
		}

		.dui_icon {
			width: 100rpx;
			height: 100rpx;
			display: block;
			margin: -50rpx auto 30rpx;
		}
	}

	.header {
		width: 100%;
		left: 0;
		top: 0;
	}

	page {
		background: linear-gradient(to left, #F857A5, #FF5858);
	}
</style>